.puzzle-game-container {
    // background-image: url("#{$base_path}/img/game/game-bg.png");
    height: 100vh;
    // width: 100vw;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
    .game-title {
        font-size: 1.6rem;
        text-align: center;
        margin-top: 6%;
        color: #fff;

    }
    .game-top {
        position: absolute;
        top: 22%;
        left: 50%;
        transform: translateX(-50%);
    }
    .game-tips {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        // background-image: url("#{$base_path}/img/puzzle/tips_bg.png");
        // background-repeat: no-repeat;
        // background-origin: content-box;
        // background-position: center;
        // background-size: 220px auto;
        // line-height: 3;
        // text-align: center;
    }
    .game-time {
        position: relative;
        img {
            display: block;
            width: 41.4vw;
            margin-left: 10px;
        }
        .time-num {
            position: absolute;
            right: 19%;
            top: 61%;
            transform: translateY(-50%);
            width: 26px;
            .adm-grid-item {
                width: 80%;
                background: #4c7ee8;
                color: #fff;
                padding: 0px 4px;
                border-radius: 2px;
                &:last-child {
                    margin-left: 4px;
                }
            }
        }
    }
    #canvas {
        display: none;
    }
    
    #game {
        // max-width: 800px;
        width: 375px;
        box-sizing: border-box;
        // margin: 0 auto;
        // margin-top: 10px;
        height: 488px;
        position: absolute;
        // bottom: 50%;
        background-image: url("#{$base_path}/img/game/game-wrap.png");
        padding: 15px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        // top: 35%;
        top: calc(50% - 21vh);
        // background-color: #2873e5;
        padding: 34px 30px 36px 34px;
        left: 50%;
        transform: translateX(-50%);
        // overflow: hidden;
        margin: 0;
    }
    
    #game img {
        width: 99%;
    }
    
    #grid-imgs {
        position: relative;
        // height: 100%;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 999;
        // background-color: #fff;
        .gridItem {
            width: 33%;
            // float: left;
            position: absolute
            // list-style: none;
    
        }
        // img {
        //     width: 375px;
        // }
    } 
    
    /*提示信息*/
    .hint {
        width:100%;
        height: 100%;
        position: fixed;
        top:0 ;
        background-color: #3C3C3C;
        opacity: .8;
        text-align: center;
        z-index: 999;
        color: white;
    }
    .hint>div{
        font-size: 20px;
        position: absolute;
        top: 20%;
        left: 50%;
        margin-left: -100px;
    }
    .hint p{
        margin: 5px 0;
    }
    .hide{
        display: none;
    }
}
.result-modal {
    text-align: center;
    .modal-btn {
        margin-top: 10px;
        background-size: cover;
        color: #fff;
            font-size: 18px;
            line-height: 1.127;
            text-align: center;
            text-shadow: 0px 1px 1px rgba(7, 1, 3, 0.5);
          
        background-repeat: no-repeat;
        background-position: center;

    }
    &.adm-center-popup-body {
        background-color: transparent;
    }
    .result-modal-icon {
        img {
            height: 88px;
            display: block;
            margin: 10px auto;
        }
        

    }
    .result-modal-text {
            font-size: 21px;
            color: var(--adm-color-primary);
            line-height: 1.2;
            text-align: center;
            font-weight: bold;
          
    }
    .result-modal-text2 {
        font-size: 14px;
        color: rgb(102, 102, 102);
        line-height: 2;
        margin-top: 10px;
        text-align: center;
      }
      
      .operation {
        position: absolute;
        bottom: -50px !important;
        left: 0;
        .modal-btn {
            background-size: cover;
            color: #fff;
                font-size: 18px;
                line-height: 1.127;
                text-align: center;
                text-shadow: 0px 1px 1px rgba(7, 1, 3, 0.5);
              
            background-repeat: no-repeat;
            background-position: center;

        }
      }
    // &.close-at-center-bottom {
    //     > .adm-modal-content {
    //       > .inner {
    //         > .close-btn {
    //         //   top: -18%;
    //         //   position: absolute;
    //         //   right: -10%;
    //         //   font-size: 3.6rem;
    //         //   @include transform(translateX(50%));
    //         }
    //       }
    //     }
    //   }
}